<template>
	<view>
		<form v-show="mainflag">
			<view class="cu-form-group margin-top">
				<view class="title">工单类型:</view>
				<input disabled="true" :value="reportType[info.type].type"  name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">是否解决:</view>
				<input disabled="true"  :value="info.result == 1?'是':'否'"  name="input"></input>
			</view>
			<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
			<!-- <view class="cu-form-group margin-top">
				<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="多行文本输入框"></textarea>
			</view> -->
			<view class="d-flex margin-left">
				<view class="title">故障现象:</view>
				<textarea disabled="true" class="padding-left" :value="info.reason!==''?info.reason:'无'"  placeholder="无"></textarea>
			</view>
			<view class="d-flex margin-left">
				<view class="title">解决方案:</view>
				<textarea disabled="true" class="padding-left"  :value="info.solution!==''?info.solution:'无'" placeholder="无"></textarea>
			</view>
			<view class="cu-form-group">
				<view class="title">是否更换配件:</view>
				<input disabled="true" placeholder="否" :value="info.fitting == 1?'是':'否'" name="input"></input>
			</view>
			<view class="cu-form-group" v-if="info.fitting == 1">
				<view class="title">配件型号:</view>
				<input disabled="true" placeholder="暂无型号" :value="info.fitting_addtion?info.fitting_addtion:'暂无型号'" name="input"></input>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					工作图片:
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in info.file" :key="index" @tap="preview(item.file)" :data-url="item.file">
					 <image :src="item.file" mode="aspectFill"></image>
					</view>
				</view>
			</view>
	
		</form>
	</view>
</template>

<script>
	import {getReportDetailsByEquipmentId} from '@/api/user/index.js'
	export default {
		data() {
			return {
				mainflag:false,
				//查询失败，没有数据
				showflag:false,
				reportType: [{
					id: 0,
					type: '巡检'
				}, {
					id: 1,
					type: '调试'
				}, {
					id: 2,
					type: '保养'
				}, {
					id: 3,
					type: '维修'
				}, {
					id: 4,
					type: '培训'
				}, {
					id: 5,
					type: '安装'
				}, ],
				info: {
					id:'',
					type: 1,
					reason: "",
					result: '',
					solution:"",
					fitting:'',
					fitting_addtion:"",
					file:[{
						id:'',
						report_id:'',
						file:""
					}]
				
				}
				}
		},
		methods: {
				submit(){
					console.log(this.submitInfo)
				},
				// ############################图片预览#############################
				preview(imageUrl){
					var imgArr = [];
					imgArr.push(imageUrl);
					//预览图片
					uni.previewImage({
						urls: imgArr,
						current: imgArr[0]
					});
				}
		
			},
			onShow() {
				/**
				 * 检验当前是否已经登录
				 */
				let curRoute  = this.$mp.page.route;
				this.$intercept.permission(curRoute)
			},
			onLoad(option) {
				console.log(option.id)
				getReportDetailsByEquipmentId(option.id).then((res)=>{
					if(res.result){
						this.info = res.result
						console.log(this.info)
						uni.hideLoading()
						this.mainflag = true
						this.showflag = true
					}else{
						uni.hideLoading()
						this.mainflag = true
						this.showflag = false
					}
						
				})
			}
		}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
